<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />






<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/page/2/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.2',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/page/2/"/>





  <title>Hexo</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Hexo</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/08/31/canvas案例/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/08/31/canvas案例/" itemprop="url">canvas案例</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-31T21:26:15+08:00">
                2017-08-31
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="坐标轴–折线图"><a href="#坐标轴–折线图" class="headerlink" title="坐标轴–折线图"></a>坐标轴–折线图</h2><p>演示：</p>
<p><img src="/img/zxt.png" alt="image"></p>
<p>代码：</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/08/31/canvas案例/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/08/30/yxl/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/08/30/yxl/" itemprop="url">原型链问题</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-30T16:25:31+08:00">
                2017-08-30
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h2><p><img src="/img/1.png" alt="image"></p>
<h4 id="对象属性的搜索访问机制：原型链"><a href="#对象属性的搜索访问机制：原型链" class="headerlink" title="对象属性的搜索访问机制：原型链"></a>对象属性的搜索访问机制：原型链</h4><ul>
<li>当你访问对象的某个成员的时候：<ol>
<li>先在自己身上找，找到即返回使用</li>
<li>找不到，则沿着原型链向上查找</li>
<li>如果在上一个原型对象中找到，则返回使用</li>
<li>如果找不到，则继续沿着原型链查找</li>
<li>直到 Object.prototype </li>
<li>如果还找不到，则继续找Object.prototype.<strong>proto</strong></li>
<li>这个时候发现 Object.prototype.<strong>proto</strong> 是 null</li>
<li>则停止查找，返回 undefined</li>
</ol>
</li>
</ul>
<ul>
<li>原型链的末端是谁？null</li>
<li>原型链倒数第二个是谁？Object.prototype
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/08/30/yxl/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/08/30/seajs/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/08/30/seajs/" itemprop="url">使用seajs的总结</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-30T16:05:38+08:00">
                2017-08-30
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="使用seajs的总结"><a href="#使用seajs的总结" class="headerlink" title="使用seajs的总结"></a>使用seajs的总结</h1><h4 id="好处：使用seajs的好处-不用担心被引入js文件的依赖问题"><a href="#好处：使用seajs的好处-不用担心被引入js文件的依赖问题" class="headerlink" title="好处：使用seajs的好处 不用担心被引入js文件的依赖问题"></a>好处：使用seajs的好处 不用担心被引入js文件的依赖问题</h4>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/08/30/seajs/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/08/30/js/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/08/30/js/" itemprop="url">js高级</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-30T16:03:26+08:00">
                2017-08-30
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h3 id="函数声明"><a href="#函数声明" class="headerlink" title="函数声明"></a>函数声明</h3><ul>
<li>当预解析的时候，同名函数和变量以函数为准 即 同名成员 函数优先<br>但是在执行阶段，同名变量 会把普通函数负覆盖掉</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">console.log(typeof fn) //function</div><div class="line">var fn=123</div><div class="line">function fn()&#123;</div><div class="line">console.log(&apos;hello&apos;)</div><div class="line">&#125;</div></pre></td></tr></table></figure>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/08/30/js/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/08/30/this/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/08/30/this/" itemprop="url">this 指向问题</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-30T15:34:03+08:00">
                2017-08-30
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h3 id="具体执行谁取决于函数的调用方式"><a href="#具体执行谁取决于函数的调用方式" class="headerlink" title="具体执行谁取决于函数的调用方式"></a>具体执行谁取决于函数的调用方式</h3><ul>
<li>普通函数调用是 window， 严格模式下是 undefined<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;</div><div class="line">      <span class="built_in">console</span>.log(<span class="keyword">this</span>) <span class="comment">//window</span></div><div class="line">    &#125;</div></pre></td></tr></table></figure>
</li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/08/30/this/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/06/07/数组去重/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/06/07/数组去重/" itemprop="url">数组去重</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-06-07T13:20:36+08:00">
                2017-06-07
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p><strong>第一种是比较常规的方法</strong></p>
<p><strong>思路：</strong></p>
<p>1.构建一个新的数组存放结果</p>
<p>2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比</p>
<p>3.若结果数组中没有该元素，则存到结果数组中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Array</span>.prototype.unique1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"> <span class="keyword">var</span> res = [<span class="keyword">this</span>[<span class="number">0</span>]];</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++)&#123;</div><div class="line">  <span class="keyword">var</span> repeat = <span class="literal">false</span>;</div><div class="line">  <span class="keyword">for</span>(<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; res.length; j++)&#123;</div><div class="line">   <span class="keyword">if</span>(<span class="keyword">this</span>[i] == res[j])&#123;</div><div class="line">    repeat = <span class="literal">true</span>;</div><div class="line">    <span class="keyword">break</span>;</div><div class="line">   &#125;</div><div class="line">  &#125;</div><div class="line">  <span class="keyword">if</span>(!repeat)&#123;</div><div class="line">   res.push(<span class="keyword">this</span>[i]);</div><div class="line">  &#125;</div><div class="line"> &#125;</div><div class="line"> <span class="keyword">return</span> res;</div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="string">'a'</span>, <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'d'</span>, <span class="string">'e'</span>, <span class="string">'e'</span>, <span class="number">1</span>, <span class="number">0</span>];</div><div class="line">alert(arr.unique1());</div></pre></td></tr></table></figure>
<p>第二种方法比上面的方法效率要高</p>
<p><strong>思路：</strong></p>
<p>1.先将原数组进行排序</p>
<p>2.检查原数组中的第i个元素 与 结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置</p>
<p>3.如果不相同，则将该元素存入结果数组中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Array</span>.prototype.unique2 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"> <span class="keyword">this</span>.sort(); <span class="comment">//先排序</span></div><div class="line"> <span class="keyword">var</span> res = [<span class="keyword">this</span>[<span class="number">0</span>]];</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt; <span class="keyword">this</span>.length; i++)&#123;</div><div class="line">  <span class="keyword">if</span>(<span class="keyword">this</span>[i] !== res[res.length - <span class="number">1</span>])&#123;</div><div class="line">   res.push(<span class="keyword">this</span>[i]);</div><div class="line">  &#125;</div><div class="line"> &#125;</div><div class="line"> <span class="keyword">return</span> res;</div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="string">'a'</span>, <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'d'</span>, <span class="string">'e'</span>, <span class="string">'e'</span>, <span class="number">1</span>, <span class="number">0</span>];</div><div class="line">alert(arr.unique2());</div></pre></td></tr></table></figure>
<p>第二种方法也会有一定的局限性，因为在去重前进行了排序，所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重，那这种方法便不可取了。</p>
<p><strong>第三种方法（推荐使用）</strong></p>
<p><strong>思路：</strong></p>
<p>1.创建一个新的数组存放结果</p>
<p>2.创建一个空对象</p>
<p>3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。</p>
<p>说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Array</span>.prototype.unique3 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line"> <span class="keyword">var</span> res = [];</div><div class="line"> <span class="keyword">var</span> json = &#123;&#125;;</div><div class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="keyword">this</span>.length; i++)&#123;</div><div class="line">  <span class="keyword">if</span>(!json[<span class="keyword">this</span>[i]])&#123;</div><div class="line">   res.push(<span class="keyword">this</span>[i]);</div><div class="line">   json[<span class="keyword">this</span>[i]] = <span class="number">1</span>;</div><div class="line">  &#125;</div><div class="line"> &#125;</div><div class="line"> <span class="keyword">return</span> res;</div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> arr = [<span class="number">112</span>,<span class="number">112</span>,<span class="number">34</span>,<span class="string">'你好'</span>,<span class="number">112</span>,<span class="number">112</span>,<span class="number">34</span>,<span class="string">'你好'</span>,<span class="string">'str'</span>,<span class="string">'str1'</span>];</div><div class="line">alert(arr.unique3());</div></pre></td></tr></table></figure>
          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/03/25/JQuery中ajax同源和跨域请求原理及封装/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/03/25/JQuery中ajax同源和跨域请求原理及封装/" itemprop="url">JQuery中ajax同源和跨域请求原理及封装</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-03-25T10:44:37+08:00">
                2017-03-25
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="js中ajax的基本步骤"><a href="#js中ajax的基本步骤" class="headerlink" title="js中ajax的基本步骤"></a>js中ajax的基本步骤</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">        <span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</div><div class="line">        xhr.open(<span class="string">'post'</span>,<span class="string">'XXX.php'</span>);</div><div class="line">        xhr.setRequestHeader(<span class="string">'Content-Type'</span>,<span class="string">'application/x-www-form-urlencoded'</span>);</div><div class="line">        xhr.send(<span class="literal">null</span>);</div><div class="line">        xhr.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">            <span class="keyword">if</span>(xhr.readyState == <span class="number">4</span>)&#123;</div><div class="line">                <span class="keyword">if</span>(xhr.status == <span class="number">200</span>)&#123;</div><div class="line">                    <span class="comment">/*返回json数据*/</span></div><div class="line">                    <span class="built_in">console</span>.log(xhr.responseText);</div><div class="line">                    <span class="comment">/*转换json对象*/</span></div><div class="line">                    <span class="keyword">var</span> data = <span class="built_in">JSON</span>.parse(xhr.responseText);</div><div class="line">                    <span class="built_in">console</span>.log(data);</div><div class="line">                &#125;</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">    &#125;</div></pre></td></tr></table></figure>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/03/25/JQuery中ajax同源和跨域请求原理及封装/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/03/22/call方法-和-apply方法-以及-bind方法/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/03/22/call方法-和-apply方法-以及-bind方法/" itemprop="url">call方法和apply方法以及bind方法</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-03-22T11:17:16+08:00">
                2017-03-22
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h3 id="call方法-和-apply方法-以及-bind方法"><a href="#call方法-和-apply方法-以及-bind方法" class="headerlink" title="call方法 和  apply方法 以及 bind方法"></a>call方法 和  apply方法 以及 bind方法</h3><h4 id="call方法和apply方法"><a href="#call方法和apply方法" class="headerlink" title="call方法和apply方法"></a>call方法和apply方法</h4><ul>
<li>函数的call方法可以实现改变this指向 然后调用该函数</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">function fn()&#123;</div><div class="line">   //当fn.call时 则内部的this=fn.call方法</div><div class="line">   console.log(this)   </div><div class="line">&#125;</div><div class="line">var obj = &#123;</div><div class="line">    foo:&apos;bar&apos;</div><div class="line">&#125;</div><div class="line">fn.call(this) //fn</div><div class="line">fn.call(obj) //函数借用 obj</div><div class="line"></div><div class="line">function Person()&#123;</div><div class="line">    fn.call(this) //相当于把fn中的函数借用过来</div><div class="line">&#125;</div><div class="line">Person() //window</div><div class="line">new Person // 实例对象</div></pre></td></tr></table></figure>
<ul>
<li>相同点： </li>
</ul>
<ol>
<li>apply 和 call 的作用一样</li>
<li>第一个参数也是用来指定内部的 this 指向的</li>
<li>fn.apply(this)和fn.call(this)</li>
<li>call 和 apply 的返回值就是被调用函数的返回值</li>
</ol>
<ul>
<li><p>不同点：apply 和 call 的区别就在于传参的方式不一样</p>
<ul>
<li>call方法<ol>
<li>可以传多个参数</li>
</ol>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">2. 指定为方法传递参数，他们对应方法的参数一一对应传递过去</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">   function fn (a, b, c) &#123;</div><div class="line">      console.log(this, a, b, c)</div><div class="line">    &#125;</div><div class="line">    var ret = fn.call(this, 1,2,3,4)</div><div class="line">//结果： window   1 2 3  undefined</div></pre></td></tr></table></figure>
<ul>
<li><p>apply方法</p>
<ol>
<li>apply 必须传数组<ol>
<li>apply 会把参数数组给展开，然后一一对应的传递给 fn 方法</li>
<li>apply 只处理第一个参数参数，其它的不处理</li>
</ol>
</li>
</ol>
<p>​<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">  function fn (a, b, c) &#123;</div><div class="line">  console.log(this, a, b, c)</div><div class="line">&#125;</div><div class="line">var ret = fn.apply(this, [1, 2, 3], [4, 5, 6])</div><div class="line">//结果： window   1 2 3</div></pre></td></tr></table></figure></p>
</li>
</ul>
<p>​</p>
<p> call方法应用例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">```javascript</div><div class="line"> &lt;script&gt;</div><div class="line">    var animals = [</div><div class="line">      &#123; species: &apos;Lion&apos;, name: &apos;King&apos; &#125;,</div><div class="line">      &#123; species: &apos;Whale&apos;, name: &apos;Fail&apos; &#125;</div><div class="line">    ];</div><div class="line"></div><div class="line">    var handle = function (i) &#123;</div><div class="line">      // this = animals[i]</div><div class="line">      this.print = function () &#123;</div><div class="line">        console.log(&apos;#&apos; + i + &apos; &apos; + this.species + &apos;: &apos; + this.name);</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    for (var i = 0; i &lt; animals.length; i++) &#123;</div><div class="line">      ;(function (i) &#123;</div><div class="line">        this.print = function () &#123;</div><div class="line">          console.log(&apos;#&apos; + i + &apos; &apos; + this.species + &apos;: &apos; + this.name);</div><div class="line">        &#125;</div><div class="line">      &#125;).call(animals[i], i)</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    console.log(i)</div><div class="line">  &lt;/script&gt;</div></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="bind方法"><a href="#bind方法" class="headerlink" title="bind方法"></a>bind方法</h4><ul>
<li>bind方法也是用来改变函数内部this指向的，但是他不调用，二食返回一个指定了this环境的新函数；</li>
<li>注意：这个方法只是指定this的指向，但是不会执行，只是返回一个指定this指向的新函数</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">&lt;script&gt;</div><div class="line">    <span class="keyword">var</span> obj = &#123;</div><div class="line">        name: <span class="string">'haha'</span></div><div class="line">    &#125;</div><div class="line">    <span class="keyword">var</span> user = &#123;</div><div class="line">      sayName: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">        <span class="keyword">var</span> that = <span class="keyword">this</span></div><div class="line">        setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">          <span class="built_in">console</span>.log(that.name)</div><div class="line">        &#125;, <span class="number">1000</span>)</div><div class="line">        <span class="comment">// 等价于上面的方法，指定this的指向</span></div><div class="line">        setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">          <span class="built_in">console</span>.log(<span class="keyword">this</span>.name)</div><div class="line">        &#125;.bind(<span class="keyword">this</span>), <span class="number">1000</span>)</div><div class="line">      &#125;</div><div class="line">    &#125;</div><div class="line">    user.sayName() <span class="comment">//张三</span></div></pre></td></tr></table></figure>
<ul>
<li>javascript中的传参方式是先求值之后在进行传参</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">  var handle = function () &#123;</div><div class="line">          console.log(this)</div><div class="line">        &#125;</div><div class="line"> var newHandle = handle.bind(obj)</div><div class="line">// JavaScript 是求值之后才传递参数</div><div class="line"> setTimeout(newHandle, 1000)</div></pre></td></tr></table></figure>
<ul>
<li>bind的参数的问题</li>
</ul>
<ol>
<li>bind 可以传参，但是不调用</li>
<li>得到bing之后的新函数也可以进行传参</li>
<li>当你在调用通过 bind 得到的新函数的时候，际上会把你在 bind ,的时候传递的参数和你调用新函数传递的参数进行合并，然后作为函数的参数</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">&lt;script&gt;</div><div class="line">    var obj = &#123;</div><div class="line">      foo: &apos;bar&apos;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    function fn(x, y, z) &#123;</div><div class="line">      console.log(this, x, y, z)</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    var newFn = fn.bind(obj, 1)</div><div class="line"></div><div class="line">    newFn(4, 5) // Object&#123;foo:&apos;bar&apos;&#125; 1 4 5</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
<ol>
<li>参数是以bind的时候传的参数为准 如下：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">&lt;script&gt;</div><div class="line">    var obj = &#123;</div><div class="line">      foo: &apos;bar&apos;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    function fn(x, y, z) &#123;</div><div class="line">      console.log(this, x, y, z)</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    var newFn = fn.bind(obj, 1,2,3)</div><div class="line"></div><div class="line">    newFn(4, 5) // Object&#123;foo:&apos;bar&apos;&#125; 1 2 3</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
<ol>
<li>读取参数的方式按顺序读取</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">&lt;script&gt;</div><div class="line">    var obj = &#123;</div><div class="line">      foo: &apos;bar&apos;</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    function fn(x, y, z) &#123;</div><div class="line">      console.log(this, x, y, z)</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    var newFn = fn.bind(obj, 1,2)</div><div class="line"></div><div class="line">    newFn(4, 5) // Object&#123;foo:&apos;bar&apos;&#125; 1 2 4</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
<p>### </p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2016/12/22/JS数组常用方法/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2016/12/22/JS数组常用方法/" itemprop="url">JS中数组的常用方法</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2016-12-22T11:37:16+08:00">
                2016-12-22
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="对数组产生影响方法"><a href="#对数组产生影响方法" class="headerlink" title="对数组产生影响方法"></a>对数组产生影响方法</h2><h3 id="栈方法"><a href="#栈方法" class="headerlink" title="栈方法"></a>栈方法</h3><h4 id="push"><a href="#push" class="headerlink" title="push"></a>push</h4><p>push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。</p>
<h4 id="pop"><a href="#pop" class="headerlink" title="pop"></a>pop</h4><p>pop()方法会删除数组最后一项，并将该项返回。</p>
<h3 id="队列方法"><a href="#队列方法" class="headerlink" title="队列方法"></a>队列方法</h3><h4 id="shift"><a href="#shift" class="headerlink" title="shift"></a>shift</h4><p>shift()方法会删除数组的第一项，并将该项返回。</p>
<h4 id="unshift"><a href="#unshift" class="headerlink" title="unshift"></a>unshift</h4><p>unshift()方法可以在数组前端添加任意个项，并返回修改后数组的长度。</p>
<h3 id="重排序方法"><a href="#重排序方法" class="headerlink" title="重排序方法"></a>重排序方法</h3><h4 id="reverse"><a href="#reverse" class="headerlink" title="reverse"></a>reverse</h4><p>reverse()方法可以反转数组项的顺序。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var arr = [&apos;one&apos;, &apos;two&apos;, &apos;three&apos;];</div><div class="line">arr.reverse(); </div><div class="line">console.log(arr); // [&apos;three&apos;, &apos;two&apos;, &apos;one&apos;]</div></pre></td></tr></table></figure>
<h4 id="sort"><a href="#sort" class="headerlink" title="sort"></a>sort</h4><p>sort()方法会对数组进行排序。<br>为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的<strong>字符串</strong>。<br>sort()方法可以接收一个比较函数作为参数。该比较函数接收两个参数，如果第一个参数应该位于第二个参数之前，则返回一个负数；反之返回正数；若两个参数相等则返回0.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">// 默认排序</div><div class="line">var arr = [&apos;B&apos;, &apos;C&apos;, &apos;A&apos;];</div><div class="line">arr.sort();</div><div class="line">console.log(arr); // [&apos;A&apos;, &apos;B&apos;, &apos;C&apos;]</div><div class="line"></div><div class="line">// 接收比较函数</div><div class="line">var values = [5, 1, 10, 0];</div><div class="line">values.sort(function(a, b) &#123;</div><div class="line">    return a-b;  // 升序</div><div class="line">    // return b-a;  // 降序</div><div class="line">&#125;);</div><div class="line">console.log(values); // [0,1,5,10]</div></pre></td></tr></table></figure>
<h3 id="操作方法"><a href="#操作方法" class="headerlink" title="操作方法"></a>操作方法</h3><h4 id="splice"><a href="#splice" class="headerlink" title="splice"></a>splice</h4><p>splice()方法可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素。<br>splice()方法始终都会返回一个空数组，该数组中包含从原始数组中删除的项。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">var arr = [&apos;Microsoft&apos;, &apos;Apple&apos;, &apos;Yahoo&apos;, &apos;AOL&apos;, &apos;Excite&apos;, &apos;Oracle&apos;];</div><div class="line">var arrDel = arr.splice(2, 3, &apos;Google&apos;, &apos;Facebook&apos;); // 从索引2开始删除3个元素,然后再添加两个元素</div><div class="line">console.log(arr);  // [&apos;Microsoft&apos;, &apos;Apple&apos;, &apos;Google&apos;, &apos;Facebook&apos;, &apos;Oracle&apos;]</div><div class="line">console.log(arrDel);  // [&apos;Yahoo&apos;, &apos;AOL&apos;, &apos;Excite&apos;]</div></pre></td></tr></table></figure>
<h1 id="所有方法总结"><a href="#所有方法总结" class="headerlink" title="所有方法总结"></a>所有方法总结</h1><h1 id="push-pop-unshift-shift"><a href="#push-pop-unshift-shift" class="headerlink" title="push() pop() unshift() shift()"></a>push() pop() unshift() shift()</h1><p>把这些方法看成栈操作：前两者正常的栈操作，后两者是反向的栈操作<br>push()和unshift()往数组中从后面、前面添加元素，并返回新数组的长度<br>pop()和shift()删除数组中最后、最前的元素，并返回删除的元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> arr = [];</div><div class="line"> </div><div class="line"><span class="built_in">console</span>.log(arr.push(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>));<span class="comment">//3</span></div><div class="line"><span class="built_in">console</span>.log(arr);<span class="comment">//[1, 2, 3]</span></div><div class="line"> </div><div class="line"><span class="built_in">console</span>.log(arr.pop());<span class="comment">// 3</span></div><div class="line"><span class="built_in">console</span>.log(arr);<span class="comment">//[1,2]</span></div><div class="line"> </div><div class="line"><span class="built_in">console</span>.log(arr.push([<span class="number">4</span>,<span class="number">5</span>]));<span class="comment">//3</span></div><div class="line"><span class="built_in">console</span>.log(arr);<span class="comment">// [1, 2, [4, 5]]</span></div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> arr = [];</div><div class="line"> </div><div class="line"><span class="built_in">console</span>.log(arr.unshift(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>));<span class="comment">//3</span></div><div class="line"><span class="built_in">console</span>.log(arr);<span class="comment">//[1, 2, 3]</span></div><div class="line"> </div><div class="line"><span class="built_in">console</span>.log(arr.shift());<span class="comment">// 1</span></div><div class="line"><span class="built_in">console</span>.log(arr);<span class="comment">// [2, 3]</span></div><div class="line"> </div><div class="line"><span class="built_in">console</span>.log(arr.unshift([<span class="number">4</span>,<span class="number">5</span>]));<span class="comment">//3</span></div><div class="line"><span class="built_in">console</span>.log(arr);<span class="comment">//[[4, 5], 2, 3]</span></div></pre></td></tr></table></figure>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2016/12/22/JS数组常用方法/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2016/12/18/JS字符串常用方法/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2016/12/18/JS字符串常用方法/" itemprop="url">JS字符串的常用方法</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2016-12-18T14:27:19+08:00">
                2016-12-18
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="chatAt"><a href="#chatAt" class="headerlink" title="chatAt()"></a>chatAt()</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">str.charAt(n)</div></pre></td></tr></table></figure>
<p>返回字符串的第 n 个字符，如果不在 0~str.length-1之间，则返回一个空字符串。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> str = <span class="string">"javascript"</span>;</div><div class="line">str.charAt(<span class="number">2</span>); <span class="comment">//'v'</span></div><div class="line">str.charAt(<span class="number">12</span>); <span class="comment">//''</span></div></pre></td></tr></table></figure>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2016/12/18/JS字符串常用方法/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/"><i class="fa fa-angle-left"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/3/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel sidebar-panel-active">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg"
               alt="shine-wl" />
          <p class="site-author-name" itemprop="name">shine-wl</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
            
              <a href="/archives/">
            
                <span class="site-state-item-count">21</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          
            
            
            <div class="site-state-item site-state-tags">
              
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">标签</span>
              
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

        


      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">shine-wl</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动</div>

  <span class="post-meta-divider">|</span>

  <div class="theme-info">主题 &mdash; <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.2</div>


        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script>



  
    <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>

  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  








  





  

  

  

  

  

  

</body>
</html>
